<template>
	<view class="page">
		<!-- 顶部导航栏 -->
		<view class="header">
			<!-- <view class="back" @click="goBack">←</view> -->
			<!-- <view class="title">骏山项目</view> -->
			<view class="title">{{ projectName }}</view>
			<!-- 			<view class="edit">
				<u-icon name="edit-pen" size="28"></u-icon>
			</view> -->
			<!-- <view class="icons">
				<image src="https://yun.qiongtuyule.com/static/edit.png" class="icon" @tap="onEdit" />
			</view> -->
		</view>

		<!-- 设备卡片列表 -->
		<view class="device-list">
			<view v-for="item in devices" :key="item.code" class="device-card"
				:class="item.status === '正常' ? 'normal' : 'abnormal'" @click="goToDetail(item.id)">
				<!-- 第一排：设备号 + SIM号 + 右箭头 -->
				<view class="row space-between">
					<view>
						<view class="device-code">{{ item.code?item.code:'' }}</view>
						<view class="device-pn">{{ item.pn?item.pn:'' }}</view>
					</view>
					<text class="arrow">›</text>
				</view>

				<!-- 第二排：图标 -->
				<!-- 第二排：图标 -->
				<view class="row center icon-row">
					<image :src="item.status === '正常' ? '/static/status_normal.png' : '/static/status_abnormal.png'"
						mode="aspectFit" class="icon-image" />
				</view>

				<!-- 第三排：状态 + 电量 + 信号 -->
				<view class="info_container">
					<view v-if="item.status === '正常'" class="info status normal-text">正常</view>
					<view v-else class="info status abnormal-text">设备异常</view>

					<view v-if="item.status === '正常'" class="info status normal-text">电量: {{ item.battery }}%</view>
					<view v-if="item.status === '正常'" class="info status normal-text">信号: {{ item.signal_strength }}%
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				projectId: null,
				devices: [],
				projectName: '',
			};
		},
		onLoad(options) {
			this.projectId = options.id;
			this.fetchDeviceList();
			this.fetchProjectInfo();
		},
		methods: {
			onEdit() {

			},
			goBack() {
				uni.navigateBack();
			},
			goToDetail(projectId) {
				uni.navigateTo({
					url: `/pages/xunjian/project_detail?projectId=${projectId}`,
				});
			},
			async fetchDeviceList() {
				const res = await this.$lib.$http.post({
					url: this.$lib.$urlMap.deviceList,
					data: {
						page: 1,
						limit: 10,
						project_id: this.projectId
					},
					needLogin: true
				})

				if (res.code === 1) {
					this.devices = res.data
				} else {
					uni.showToast({
						title: '设备列表加载失败',
						icon: 'none'
					})
				}
			},
			async fetchProjectInfo() {
				const res = await this.$lib.$http.post({
					url: this.$lib.$urlMap.projectInfo,
					data: {
						id: this.projectId
					},
					needLogin: true
				});

				if (res.code === 1 && res.data) {
					this.projectName = res.data.name;
				} else {
					uni.showToast({
						title: '项目名称加载失败',
						icon: 'none'
					});
				}
			},
		},
	};
</script>

<style scoped>
	.page {
		background: #fff;
		min-height: 100vh;
		padding: 20rpx;
	}


	/* 添加到你的样式文件中 */
	.icon-image {
		width: 49rpx;
		/* 图片宽度 */
		height: 48rpx;
		/* 图片高度 */
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
		margin-top: 20rpx;
	}

	.back {
		font-size: 40rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.edit {
		margin-right: 10rpx;
	}

	.icons {
		display: flex;
	}

	.icon {
		width: 40rpx;
		height: 40rpx;
		margin-left: 20rpx;
	}

	.icon-link {
		font-size: 28px;
	}

	.link-normal {
		color: #0f0;
		/* 绿色 */
	}

	.link-abnormal {
		color: #fff;
		/* 白色 */
	}

	.info_container {
		display: flex;
		/* 启用 Flexbox 布局 */
		justify-content: center;
		/* 子元素从左侧开始排列 */
		align-items: center;
		/* 垂直居中对齐 */
		/* margin-top: 60rpx; */
	}

	.info {
		/* margin-right: -10px; */
		font-size: 12px;
		/* 设置字体大小 */
		line-height: 24px;
		/* 设置行高 */
		white-space: nowrap;
		/* 防止内容换行 */
		/* padding: 5rpx; */
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50px;
		padding: 0 15px;
		background: #fff;
	}

	.back {
		font-size: 20px;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
	}

	.edit {
		font-size: 20px;
	}

	.device-list {
		display: flex;
		flex-wrap: wrap;
		/* 换行显示 */
		justify-content: space-between;
		/* 两列卡片之间有间距 */
		padding: 10rpx;
		box-sizing: border-box;
	}

	.device-card {
		width: 48%;
		/* 每行两个卡片，中间留2%的间距 */
		margin-bottom: 20rpx;
		height: 210rpx;
		/* 卡片垂直间距 */
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
	}

	.device-code,
	.device-pn {
		color: white;
		/* 设备号和PN号显示白色 */
		font-size: 24rpx;
		height:30rpx;
		line-height:30rpx;
	}

	.arrow {
		color: white;
	}

	.device-card.normal {
		background: #111;
	}

	.device-card.abnormal {
		background: #f66;
	}

	/* 设置固定高度 */
	.fixed-height {
		height: 50px;
		/* 根据需要调整高度 */
	}

	.row {
		margin-bottom: 8px;
	}

	.row.space-between {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.row.center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.row.nowrap {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		/* 不换行 */
	}

	.arrow {
		font-size: 20px;
	}

	.icon-row {
		/* margin: 12px 0; */
	}

	.icon-link {
		font-size: 28px;
	}

	.status {
		font-weight: bold;
		margin-left:5rpx;
	}

	.normal-text {
		color: #0f0;
	}

	.abnormal-text {
		color: #fff;
	}

	.ml {
		margin-left: 10px;
	}
</style>